<template>
  <div id="app">
    <!-- <Movie v-for = "movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie> -->
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friends">关注</router-link>
    <!-- 声明一个路由占位符 -->
    <router-view></router-view>
  </div>
</template>


<script>
import Movie from './components/movie.vue'
import axios from 'axios'

export default {
  name: 'App',
  data:function(){
        return {
            movies:[
                {id:1,title:"mbc1",rating:8.7},
                {id:2,title:"mbc2",rating:8.8},
                {id:3,title:"mbc3",rating:8.4},
            ]
        }
    },
    //数据交互
  created:function(){
    axios.get("http://localhost:9000/user").then(function(response){
      console.log(response)
    })
  },
  mounted:function(){
    console.log("app被挂载完毕")
  },
  components: {
    Movie
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
